 组件基础
   基本示列
   这里有一个Vue组件的示列：
   //定义一个名为 button-counter的系组件
   Vue.component('button-counter',{
       data:function(){
           return{
               count:0
           }
       },
       template: `<button v-on:click="count++"
                    you clicked me {{count}} times.
                </button>`
   })

   组件是可复用的Vue实列，且带有一个名字：在这个例子中是<button-counter>。
   我们可以在一个通过new Vue 创建的Vue根实例中，把这个组件作为自定义组件来使用：

    <div id="components-dome">
        <button-counter></button-counter>
    </div>

    new Vue({el:'#components-dome'})

    因为组件是可以复用的Vue实例，所以它们与new Vue 接收相同的选项，例如
    data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像el这样的根实例
    特有的选项。

组件的复用
    你可以将组件进行任意次数的复用：

    <div id="components-dome">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>



    注意当点击按钮时，每个组件都会各自独自维护它的count。因为你每用一次组件，就会有一个
    它的新实例被创建。
# data 必须是一个函数

    当我们定义这个<button-counter>组件时，你可能就会发现它的 data 并不是像这样直接提供
    一个对象：

        data:{
            count:0
        }
        